<template>
    <span class="valid-image-code">
        <img :src="src" alt="">
        <el-button type="text" @click="getImage()">看不清?换一张</el-button>
    </span>
</template>
<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    @Component({})
    export default class ImageCode extends Vue {
        src = 'https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/logo.png';

        async getImage () {
            let res = await this.$http.get('pictureCheckCode/getPicCodeKey')
            if(res.status == 200){
                this.src = `${window.location.origin}` + res.data.img_url
                this.$emit('input',res.data.picCodeKey)
            }
        }
        mounted () {
            this.getImage()
        }
    }
</script>
<style scoped lang="scss">
    .valid-image-code {
        line-height: 40px;
        img {
            width: 70px;
            height: 32px;
            vertical-align: middle;
            cursor: pointer;
        }
    }
    .el-button {
        vertical-align: middle;
    }
</style>